<template>
    <Collapse title="“My project” (8)" :defaultOpen="true" openMore content="" class="mt-6 mx-2" :selectShow="false"
        :buttonStyle="{ padding: '12px 12px 4px 12px!important' }" :bodyStyle="{
            background: '#fff',
            borderTopRightRadius: '0',
            borderTopLeftRadius: '0'
        }" @click="show = !show">
        <template #rightIcon>
            <Invoice class="kjahdd-haa" />
            <span class="w-4 h-4 rounded-full mr-2 flex items-center justify-center mx-1" @click.stop="">
                <Icons name="icon-edit" class="text-[16px]! text-black-500!" />
            </span>
            <span class="w-4 h-4 rounded-full mr-2 flex items-center justify-center mx-1" @click.stop="">
                <Icons name="icon-shanchu" class="text-[16px]! text-black-500!" />
            </span>
            <span class="bg-gray-200 w-4 h-4 rounded-full mr-2 bg-green-500 flex items-center justify-center">
                <Icons name="icon-selected" class="text-[10px]! text-white!" />
            </span>
        </template>

        <div class="flex items-start px-2  border-t-[1px] border-solid border-gray-200 pt-2 mx-2">
            <div>
                <img src="/testImgs/5.webp" alt="" class="w-35!" v-img-auto />
            </div>
            <div class="flex-1 px-2">
                <div class="mb-2">
                    <div class="text-xl font-bold">
                        Custom Moroldered Patches
                    </div>
                    <div class="text-[12px] text-gray-500 mt-2">
                        Size 3X3, QTY: 300 pieces, Embroidery Coverage: 100%
                    </div>
                </div>
                <div v-if="show" class="text-[12px]">
                    <span class="text-gray-500">
                        Black Ballistic Nylon， Merrowed Border12p， ThreadVelcro Hook w/ Loop Application(1-9
                        colors),(Adhesive)， Rhinestone， Laser Cut or Hand Cut
                    </span>
                    <div class="flex justify-between mt-2 pr-4 ">
                        <div>
                            <span class="font-bold">
                                Standard
                            </span>
                            <span class="text-gray-500">
                                :Expected delivery: Dec 4 - Dec 7
                            </span>
                        </div>
                        <div>
                            +$90.00
                        </div>
                    </div>
                </div>
                <slot name="other"></slot>
                <div class="w-full py-1 flex justify-between items-center mx-left">
                    <div class="flex items-center mb-2">
                        <span class="font-bold">Total</span>
                    </div>
                    <div class="font-bold">
                        <div class="relative inline-block">
                            <div
                                class="absolute top-[50%] left-[50%] w-[120%] transform -translate-x-[50%] h-[1px] bg-gray-500">
                            </div>
                            $123131.2
                        </div>
                        <div class="text-gray-500 text-[12px] font-normal">
                            $123131.2
                        </div>
                    </div>
                    <span class="font-bold flex items-center justify-center">
                        <img src="/testImgs/icon/50-percent.png" class="w-15 h-15 object-cover inline-block mr-2"
                            alt="折扣标签" />
                        <div class="font-bold">
                            $758
                            <div class="text-blue-500 text-[12px] font-normal">
                                $123131.2
                            </div>
                        </div>
                    </span>
                </div>
                <slot name="btn"></slot>
            </div>
        </div>
    </Collapse>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Icons } from '../icons';
import Collapse from './index.vue';
import Invoice from './invoice.vue'
// 判断默认插槽是否有值
const show = ref(false)
</script>